<template>
  <div class="app-container" v-loading='listLoading'>
    <div>
      <div>
        <el-button v-if="permission == 3" type='primary' @click='linkToAddActivity'>添加活动</el-button>
        <el-button @click='handleCopy(url,$event)'>复制链接</el-button>
      </div>
      <el-form style="margin: 20px 0 10px;">
        <el-input v-model='listQuery.name' clearable placeholder='请输入活动名称' @keyup.enter.native="queryActivities" style='width: 150px;'></el-input>
        <el-date-picker  :editable="false"  style='width: 170px;' format='yyyy-MM-dd'
        	      @change="timeCheck(1)"
                v-model="listQuery.startAt"
                type="date"
                placeholder="活动日期（开始）">
        </el-date-picker>
        <span style='padding: 0 10px;font-size: 12px;color: #666;'>到</span>
        <el-date-picker  :editable="false" type='date' format='yyyy-MM-dd' placeholder='活动日期（结束）'  @change="timeCheck(2)"
                        v-model='listQuery.endAt' style='width: 170px;'>
        </el-date-picker>
        <el-button class="search" icon='el-icon-search' @click="queryActivities">搜索</el-button>
      </el-form>
    </div>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部" name="all">
      </el-tab-pane>
      <el-tab-pane label="已发布" name="public">
      </el-tab-pane>
      <el-tab-pane label="未发布" name="noPublic">
      </el-tab-pane>
      <el-tab-pane label="已结束" name="end">
      </el-tab-pane>
    </el-tabs>


    <activitiesList-table :permission="permission" @linckDetail="linckDetail" @wechat='isWechat' @fresh="queryActivities"   :isShowWechatPush = 'isShowWechatPush' :activityInfo = 'activityInfo' :activitiesListData = 'activitiesListData' ></activitiesList-table>

    <div class='block text-c'>
      <el-pagination
        @size-change='handleSizeChange'
        @current-change='handleCurrentChange'
        :current-page='listQuery.currentPage'
        :page-sizes='[10, 20, 30, 40]'
        :page-size='10'
        layout='total, sizes, prev, pager, next, jumper'
        :total='listQuery.total'>
      </el-pagination>
    </div>

    <wechat-push v-if="isShowWechatPush" :tuisongData="tuisongData" @hideWechatPush="hideWechatPush"></wechat-push>

  </div>

</template>
<script>
  import clip from '@/utils/clipboard'
  import { getActivities } from '@/api/activities'
  import wechatPush from './components/wechatPush.vue'
  import activitiesListTable from './components/activitiesListTable.vue'
  import { interaction_activities } from '@/utils/permission'

  export default {
    components: { wechatPush, activitiesListTable },
    data() {
      return {
        permission: 3,
        url: '',
        detailUrl: '',
        listLoading: false,
        activeName: 'all',
        selectValue: '',
        listQuery: {
          page: 1, // 查询索引开始位置
          limit: 10, // 每页大小
          currentPage: 1, // 当前页
          total: null, // 数据总条数
          startAt: '', // 搜索的活动开始时间
          endAt: '', // 搜索的活动结束时间
          name: '', // 搜索的活动名称
          status: -1 // 搜索的活动状态
        },
        activityInfo: {
          activityId: -1,
          audience:'',
          showEnroll:'',
          virtualBrowse:'',
          isInvitionCard: 0,
          enroll_at_type: 0,
          l1Ratio: 0,
          l2Ratio: 0,
          l3Ratio: 0,
          agentRatio: 0,
          partnerRatio: 0,
          branchRatio: 0,
          teacherId: 0,
          teacherRatio: 0,
          state: 1,
          opType: 1,
          refDatum: '',
          name: '',
          place: '',
          sponsor: '',
          poster: '',
          startAt: '',
          endAt: '',
          enrollStartAt: '',
          enrollEndAt: '',
          intro: '',
          sharePhoto:'',
          shareTitle: '',
          shareDesc: ''
        },
        isShowAdd: false, // 是否显示增加活动组件
        activitiesListData: [],
        isShowWechatPush: false,
        tuisongData: []
      }
    },
    mounted() {
      this.getModelPermission()
      // this.listQuery.total = this.tableData.length
      this.queryActivities()
    },
    methods: {
      getModelPermission() {
        this.permission = interaction_activities()
      },
      copyLink(id) {
        this.handleCopy(this.url + '/' + id, event)
      },
      linckDetail(id) {
        this.handleCopy(this.detailUrl + id, event)
      },
      handleCopy(text, event) {
        clip(text, event)
      },
      isWechat(msg) {
        this.isShowWechatPush = true
        this.tuisongData = msg
      },
      linkToAddActivity() {
        this.$router.push({ path: '/activities/create' })
      },
      handleClick(tab, event) {
        this.activeName = tab.name
        if (this.activeName == 'all') {
          this.listQuery.status = -1 // 切换子主键的名称
        } else if (this.activeName == 'public') {
          this.listQuery.status = 1
        } else if (this.activeName == 'noPublic') {
          this.listQuery.status = 0
        } else {
          this.listQuery.status = 2
        }
        this.listQuery.name = ''
        this.listQuery.startAt = ''
        this.listQuery.endAt = ''
        this.queryActivities()
      },
      queryActivities() {
        this.listLoading = true
        if (this.listQuery.startAt == null) {
          this.listQuery.startAt = ''
        }
        if (this.listQuery.endAt == null) {
          this.listQuery.endAt = ''
        }
        getActivities(this.listQuery).then(res => {
          this.activitiesListData = res.data.data.data
          this.listQuery.total = res.data.data.total
          this.url = res.data.data.linkActivity
          this.detailUrl = res.data.data.linkDetail
          this.listLoading = false
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.queryActivities()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val * this.listQuery.pageSize
        this.listQuery.currentPage = val
        this.queryActivities()
      },
      hideWechatPush(msg) {
        this.isShowWechatPush = msg
      },
      timeCheck(type) {
        if (this.listQuery.startAt && this.listQuery.endAt && this.listQuery.startAt > this.listQuery.endAt) {
          this.$message({
            message: '结束时间不能小于开始时间',
            type: 'error'
          })

          if (type == 1) {
            this.listQuery.startAt = null
          } else {
            this.listQuery.endAt = null
          }
        }
      }
    }
  }
</script>

<style scoped>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  a:hover {
    color: #409eff;
  }

  b {
    cursor: pointer;
    font-weight: 500;
  }

  b:hover {
    color: #409eff;
  }

</style>
